<template>
	<div>
		<!--轮播图-->
		<!--<mt-swipe :auto="4000">-->
			<!--在组件中用v-for循环的话，需要使用key-->
			<!--<mt-swipe-item v-for="item in lunbotuList" :key="item.url">-->
			  <!--<img :src="item.img" alt="" />-->	
			<!--</mt-swipe-item>-->
			
			<!--<mt-swipe-item>1</mt-swipe-item>
			<mt-swipe-item>2</mt-swipe-item>
			<mt-swipe-item>3</mt-swipe-item>-->
		<!--</mt-swipe>-->	
			<swiper :lunbotuList='lunbotuList' :isfull='true'></swiper>
			<!--九宫格到六宫格的改造工程-->
			<ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	
		            	<router-link to="/home/newlist">
		                    <img src="../../../img/menu1.png" alt="" />
		                    <div class="mui-media-body">新闻资讯</div>
		                </router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<router-link to="/home/photolist">
		                    <img src="../../../img/menu2.png" alt="" />
		                    <div class="mui-media-body">图片分享</div>
		            	</router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<router-link to="/home/goodslist">
		                    <img src="../../../img/menu3.png" alt="" />
		                    <div class="mui-media-body">商品购买</div>
		            	</router-link>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../../img/menu4.png" alt="" />
		                    <div class="mui-media-body">留言反馈</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                   <img src="../../../img/menu5.png" alt="" />
		                    <div class="mui-media-body">视频专区</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../../img/menu6.png" alt="" />
		                    <div class="mui-media-body">联系我们</div></a></li>
		    </ul> 		
		

	</div>
</template>

<script>
	import  {Toast} from 'mint-ui'	
	import swiper from '../subcomponents/swiper.vue'
	export default{
		data(){
			return {
				lunbotuList:[]  //保存轮播图的数组
			}
		},
		created(){
			this.getLunbotu();
		},
		methods:{
			getLunbotu(){ //获取轮播图的方法
//				this.$http.get('http://vue.studyit.io/api/getlunbo')
				this.$http.get('http://47.89.21.179:8080/api/getlunbo')
				.then(result => {
					console.log(result.body)
                    if(result.body.status === 0){
                    	//成功了
                    	this.lunbotuList = result.body.message;
                    	Toast('加载轮播图成功');
                    }else {
                    	//失败
                    	Toast('加载轮播图失败');
                    }
				})
			}
		},
		components:{
			swiper
		}
	}
</script>

<style lang="scss" scoped>

 
   
   .mui-grid-view.mui-grid-9 {
   	background-color: #fff;
   	img {
   		width:60px;
   		height: 60px;
   	}
   	.mui-media-body {
   		font-size: 13px;
   	}
   }
   .mui-grid-view.mui-grid-9 .mui-table-view-cell{
   	border:0;
   }
</style>